<template>
  <div class="paper-container">
    <div class="paper-header">
      <h1>论文首页</h1>
      <p class="subtitle">学术研究成果展示</p>
    </div>

    <!-- 个人信息卡片 -->
    <el-card class="info-card">
      <div slot="header" class="card-header">
        <span>个人信息</span>
        <i class="el-icon-user card-icon"></i>
      </div>
      <div class="info-content-with-avatar">
        <!-- 头像部分 -->
        <div class="avatar-section">
          <div class="avatar-container">
            <img :src="avatarUrl" alt="头像" class="avatar-img" v-if="avatarUrl">
            <div class="avatar-placeholder" v-else>
              <i class="el-icon-user"></i>
            </div>
            <div class="avatar-upload-overlay">
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="handleAvatarChange"
                :show-file-list="false"
                accept="image/*"
              >
                <el-button size="small" type="primary" icon="el-icon-upload">上传头像</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-details">
          <div class="info-item">
            <label>姓名：</label>
            <span>陈文杰</span>
          </div>
          <div class="info-item">
            <label>学院：</label>
            <span>工程技术学院</span>
          </div>
          <div class="info-item">
            <label>专业：</label>
            <span>云计算与大数据</span>
          </div>
          <div class="info-item">
            <label>年级：</label>
            <span>2022级</span>
          </div>
          <div class="info-item">
            <label>学号：</label>
            <span>116420220099</span>
          </div>
          <div class="info-item">
            <label>指导教师：</label>
            <span>李教授</span>
          </div>
          <div class="info-item">
            <label>联系方式：</label>
            <span>chenwenjie@example.com</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息 -->
    <el-card class="paper-info-card">
      <div slot="header" class="card-header">
        <span>毕业论文基本信息</span>
        <i class="el-icon-document card-icon"></i>
      </div>
      <div class="paper-info-content">
        <div class="info-section">
          <h3>论文题目</h3>
          <p>基于微服务架构的智慧城市数据平台设计与实现</p>
        </div>
        <div class="info-section">
          <h3>研究方向</h3>
          <p>微服务架构、云计算、大数据分析、智慧城市</p>
        </div>
        <div class="info-section">
          <h3>论文摘要</h3>
          <p>本论文提出了一种基于微服务架构的智慧城市数据平台设计方案。研究采用容器化技术和服务网格架构，构建了一个高可用、可扩展的数据平台，实现了城市交通、环境监测、公共安全等多源数据的采集、处理和分析。系统采用Kubernetes进行容器编排，使用Istio实现服务治理，通过ELK栈进行日志管理。实验结果表明，该平台能够处理每秒10万级的数据请求，系统可用性达到99.95%，相比传统单体架构性能提升了40%。研究成果为智慧城市建设提供了技术支撑和实践参考。</p>
        </div>
        <div class="info-section">
          <h3>完成时间</h3>
          <p>2025年5月</p>
        </div>
        <div class="info-section">
          <h3>论文评定</h3>
          <p class="grade-excellent">优秀</p>
        </div>
      </div>
    </el-card>

    <!-- 论文研究成果 -->
    <el-card class="achievements-card">
      <div slot="header" class="card-header">
        <span>论文研究成果</span>
        <i class="el-icon-trophy card-icon"></i>
      </div>
      <div class="achievements-content">
        <!-- 学术论文 -->
        <div class="achievement-section">
          <h3>
            <i class="el-icon-reading"></i>
            学术论文
          </h3>
          <el-timeline class="custom-timeline">
            <el-timeline-item timestamp="2024年10月" placement="top">
              <el-card class="timeline-card">
                <h4>微服务架构在智慧城市数据平台中的应用</h4>
                <p>发表于《计算机工程与应用》期刊，第一作者</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2025年3月" placement="top">
              <el-card class="timeline-card">
                <h4>容器化环境下的服务弹性伸缩策略研究</h4>
                <p>发表于《计算机应用》期刊，第二作者</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 项目经历 -->
        <div class="achievement-section">
          <h3>
            <i class="el-icon-s-management"></i>
            项目经历
          </h3>
          <el-timeline class="custom-timeline">
            <el-timeline-item timestamp="2024年8月-2025年5月" placement="top">
              <el-card class="timeline-card">
                <h4>智慧城市数据平台开发</h4>
                <p>负责系统架构设计和微服务实现，项目获得校级优秀毕业设计</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024年3月-2024年7月" placement="top">
              <el-card class="timeline-card">
                <h4>政务云平台改造项目</h4>
                <p>参与将传统政务系统迁移到容器云平台，提升系统性能和可靠性</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 专利和软件著作权 -->
        <div class="achievement-section">
          <h3>
            <i class="el-icon-coin"></i>
            专利和软件著作权
          </h3>
          <el-timeline class="custom-timeline">
            <el-timeline-item timestamp="2025年4月" placement="top">
              <el-card class="timeline-card">
                <h4>一种基于微服务的智慧城市数据处理方法</h4>
                <p>发明专利，申请号：202510012350.0</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2025年1月" placement="top">
              <el-card class="timeline-card">
                <h4>智慧城市多源数据融合平台</h4>
                <p>软件著作权，登记号：2025SR0123461</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 获奖情况 -->
        <div class="achievement-section">
          <h3>
            <i class="el-icon-medal"></i>
            获奖情况
          </h3>
          <el-timeline class="custom-timeline">
            <el-timeline-item timestamp="2025年5月" placement="top">
              <el-card class="timeline-card">
                <h4>校级优秀毕业设计一等奖</h4>
                <p>工程技术学院</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024年9月" placement="top">
              <el-card class="timeline-card">
                <h4>全国大学生云计算应用大赛一等奖</h4>
                <p>中国电子学会</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ChenwenjiePaperHome',
  data() {
    return {
      avatarUrl: ''
    }
  },
  methods: {
    handleAvatarChange(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.avatarUrl = e.target.result;
        this.$message.success('头像上传成功');
      };
      reader.readAsDataURL(file.raw);
    }
  }
}
</script>

<style scoped>
.paper-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.paper-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  color: white;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}

.paper-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,261.3C672,256,768,224,864,218.7C960,213,1056,235,1152,234.7C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-size: cover;
  background-position: bottom;
}

.paper-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
  position: relative;
  font-weight: 300;
  letter-spacing: 1px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  padding: 18px 24px;
  border-bottom: 2px solid #409eff;
  margin: -20px -20px 20px -20px;
  background: linear-gradient(to right, #fafafa, #f0f7ff);
}

.card-icon {
  color: #409eff;
  font-size: 20px;
}

.info-card,
.paper-info-card,
.achievements-card {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
}

.info-card:hover,
.paper-info-card:hover,
.achievements-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* 头像和信息布局 */
.info-content-with-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 24px;
}

.avatar-section {
  flex: 0 0 200px;
  display: flex;
  justify-content: center;
}

.avatar-container {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.4);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #409eff;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #409eff;
  background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #409eff;
}

.avatar-upload-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  width: 100%;
  text-align: center;
  padding: 15px 0 10px;
  border-radius: 0 0 70px 70px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .avatar-upload-overlay {
  opacity: 1;
}

.info-details {
  flex: 1;
  min-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #f9fbfd;
  border-radius: 8px;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.info-item:hover {
  background: #f0f7ff;
  border-left: 3px solid #409eff;
  transform: translateX(5px);
}

.info-item label {
  font-weight: 600;
  color: #606266;
  width: 120px;
  font-size: 15px;
  flex-shrink: 0;
}

.info-item span {
  color: #303133;
  font-size: 15px;
  font-weight: 500;
}

.paper-info-content {
  padding: 20px;
}

.paper-info-content .info-section {
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(to right, #fafafa, #f9fbfd);
  border-radius: 10px;
  border-left: 4px solid #409eff;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.paper-info-content .info-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.paper-info-content .info-section:last-child {
  margin-bottom: 0;
}

.paper-info-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
}

.paper-info-content p {
  color: #606266;
  line-height: 1.8;
  text-align: justify;
  font-size: 15px;
}

.grade-excellent {
  color: #f56c6c;
  font-weight: 600;
  font-size: 18px;
  padding: 5px 15px;
  background: #fef0f0;
  border-radius: 20px;
  display: inline-block;
}

.achievements-content {
  padding: 20px;
}

.achievements-content .achievement-section {
  margin-bottom: 40px;
  position: relative;
}

.achievements-content .achievement-section:last-child {
  margin-bottom: 0;
}

.achievements-content h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.achievements-content h3 i {
  margin-right: 10px;
  font-size: 22px;
}

.custom-timeline {
  padding-left: 10px;
}

.custom-timeline ::v-deep .el-timeline-item__timestamp {
  font-size: 15px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 5px 12px;
  background: #f0f7ff;
  border-radius: 15px;
  display: inline-block;
}

.custom-timeline ::v-deep .el-timeline-item__node {
  background-color: #409eff;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
  width: 14px;
  height: 14px;
}

.custom-timeline ::v-deep .el-timeline-item__tail {
  border-left: 2px solid #e4e7ed;
}

.custom-timeline ::v-deep .el-timeline-item__wrapper {
  padding-left: 25px;
  padding-top: 0;
}

.timeline-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid #409eff;
  margin-bottom: 20px;
}

.timeline-card:hover {
  transform: translateX(10px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.15);
}

.timeline-card h4 {
  font-size: 17px;
  color: #303133;
  margin-bottom: 8px;
  font-weight: 600;
}

.timeline-card p {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .info-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .paper-container {
    padding: 15px;
  }

  .info-content-with-avatar {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .avatar-section {
    flex: none;
  }

  .info-details {
    width: 100%;
  }

  .paper-header h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .card-header {
    padding: 15px 20px;
    font-size: 16px;
  }

  .paper-info-content .info-section {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .paper-header {
    padding: 30px 0;
  }

  .paper-header h1 {
    font-size: 24px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-item label {
    width: 100%;
    margin-bottom: 5px;
  }

  .custom-timeline ::v-deep .el-timeline-item__timestamp {
    font-size: 14px;
  }
}
</style>
